<template>
  <el-container style="height: 100%">
    <el-main style="height: 100%; align-content: center">
      <el-card class="box-card" style="margin-right: 30%; margin-left: 30%; margin-top: 7%; width: 39%">
        <template #header>
          <div class="card-header">
            <span>登录</span>
          </div>
        </template>
        <div v-if="this.state === 'login'" style="padding: 5%">
          <el-input v-model="username" placeholder="用户名" />
          <el-input style="margin-top: 20px" v-model="password" placeholder="密码" />
          <el-button @click="Login" style="margin-top: 20px" type="primary">登录</el-button>
          <el-button @click="toRegister" style="margin-top: 20px" type="primary">去注册</el-button>
        </div>
        <div v-if="this.state === 'register'" style="padding: 5%">
          <el-input v-model="rusername" placeholder="用户名" />
          <el-input style="margin-top: 20px" v-model="rpassword" placeholder="密码" />
          <el-input style="margin-top: 20px" v-model="remail" placeholder="邮箱" />
          <el-input style="margin-top: 20px" v-model="rphone" placeholder="电话" />
          <el-button @click="Register" style="margin-top: 20px" type="primary">注册</el-button>
          <el-button @click="toLogin" style="margin-top: 20px" type="primary">去登录</el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import request from '@/utils/request'
import { setTokenHead, setToken, setRefreshToekn } from '@/utils/auth'
import {getUserInfo, setFullUserInfo, setUserInfo} from "@/utils/owninfo";
import router from "@/router";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password:"",
      state:"login",//register
      rusername: "",
      rpassword: "",
      remail: "",
      rphone: "",
    };
  },
  methods: {
    Login(){
      request({
        url: '/auth/oauth/token',
        method: 'post',
        params:{
          username: this.username,
          password: this.password,
          grant_type: 'password',
          client_id: 'client-app',
          client_secret: '123456',

        }
      }).then(response => {
        console.info(response)
        setTokenHead("Bearer")
        setToken(response.access_token)
        setRefreshToekn(response.refresh_token)
        setUserInfo(response.id)
        this.$mybus.emit('openWebsocket',response.id);
        if(response.id !== undefined){
          this.loadUserInfo()
          this.$message.success('登陆成功');
        }
        router.push("/")
      }).catch(error => {
        console.info(error)
        this.$message.error('登录失败');
      })
    },
    Register(){
      request({
        url: '/user/register',
        method: 'post',
        params:{
          username: this.rusername,
          password: this.rpassword,
          email: this.remail,
          phonenumber: this.rphone,

        }
      }).then(response => {
        console.info(response)
        if(response.code === 20000){
          this.$message.success('注册成功');
          this.username = this.rusername;
          this.password = this.rpassword;
          this.Login();
          this.state = 'login';
        }
      }).catch(error => {
        console.info(error)
        this.$message.error('登录失败');
      })
    },
    loadUserInfo(){
      request({
        url: '/user/getusersbyids',
        method: 'post',
        params:{
          ids:getUserInfo(),
        }
      }).then(response => {
        console.info(response)
        setFullUserInfo(JSON.stringify(response.data.users[0]))
      }).catch(error => {
        console.info(error)
        this.$message.error('获取用户信息失败');
      })
    },
    toRegister(){
      this.state = 'register'
    },
    toLogin(){
      this.state = 'login'
    }
  }
}

</script>

<style scoped>

</style>
